<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-05-05 22:02:56
 * @LastEditors: liuyq
 * @LastEditTime: 2021-09-22 17:52:47
-->
<template>
  <!-- 2.创建图表容器 容纳图表 -->
  <div ref="root" style="height: 100px"></div>
</template>

<script>
import { Bullet } from "@antv/g2plot";
import { ref, onMounted } from 'vue';
// 1.引入组件
export default {
  setup() {
    let root = ref(null);
    let bullet = null;
    const data = [
      {
        title: "重庆",
        ranges: [30, 90, 120],
        measures: [65],
        target: 80,
      },
      {
        title: "杭州",
        ranges: [30, 90, 120],
        measures: [50],
        target: 100,
      },
      {
        title: "广州",
        ranges: [30, 90, 120],
        measures: [40],
        target: 85,
      },
      {
        title: "深圳",
        ranges: [30, 90, 120],
        measures: [50],
        target: 100,
      },
    ];
    let initCharts = () => {
      bullet = new Bullet(root.value, {
        data,
        measureField: "measures",
        rangeField: "ranges",
        targetField: "target",
        xField: "title",
        color: {
          range: ["#FFbcb8", "#FFe0b0", "#bfeec8"],
          measure: "#5B8FF9",
          target: "#39a3f4",
        },
        label: {
          measure: {
            position: "middle",
            style: {
              fill: "#fff",
            },
          },
        },
        xAxis: {
          line: null,
        },
        yAxis: false,
        // 自定义 legend
        legend: {
          custom: true,
          position: "bottom",
          items: [
            {
              value: "差",
              name: "差",
              marker: { symbol: "square", style: { fill: "#FFbcb8", r: 5 } },
            },
            {
              value: "良",
              name: "良",
              marker: { symbol: "square", style: { fill: "#FFe0b0", r: 5 } },
            },
            {
              value: "优",
              name: "优",
              marker: { symbol: "square", style: { fill: "#bfeec8", r: 5 } },
            },
            {
              value: "实际值",
              name: "实际值",
              marker: { symbol: "square", style: { fill: "#5B8FF9", r: 5 } },
            },
            {
              value: "目标值",
              name: "目标值",
              marker: { symbol: "line", style: { stroke: "#39a3f4", r: 5 } },
            },
          ],
        },
      });
      bullet.render();
    };
    onMounted(initCharts);
    return {
      root
    }
  },
};
</script>